<template>
  <ul class="c-curse">
    <router-link to="/detail">
      <li v-for="item in arrList" :key="item.title">
        <img :src="item.imgUrl" />
        <h1>{{item.title}}</h1>
        <p>{{item.description}}</p>
      </li>
    </router-link>
  </ul>
</template>


<script>
export default {
  props: {
    arrList: Array,
  },
  data() {
    return {

    }
  }
}
</script>

<style coped>
  .c-curse li {
    width: 335px;
    height: 72px;
    padding-left: 20px;
    padding-top: 24px;
    line-height: 17px;
  }
  .c-curse li  img {
    display: block;
    width: 108px;
    float: left;
    border-radius: 5px;
    margin-right: 16px;
  }
  .c-curse li h1{
    font-size: 15px;
  }
  .c-curse li p {
    margin-top: 3px;
  }
</style>